<!--模板开始-->
<style type="text/css">
    * {
        padding: 0px;
        margin: 0px;
        -webkit-box-sizing: border-box
    }

    body {
        background-color: white
    }

    #container {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 500px;
        height: 815px;
        overflow: hidden;
    }
    #container > img,#container > div {
        position: absolute;
    }

    .abs{position:absolute;}

    #pagetitle {
        position: absolute;
        width: 452px;
        height: 428px;
        left:24px;
        top:165px;
        opacity: 0;
    }

    .titletable {
        position: absolute;
        width: 200px;
        height: 130px;
        top: 143px;
        left: 128px;
        display: table;
    }
    #titlecontent {
        vertical-align:middle;
        display:table-cell;
        text-align:center;
        font-size:22px;
        line-height:33px;
        color:#FDACB9;
    }

    #container {
        -webkit-perspective: 500;
    }

    #yezi1 {
        position: absolute;
        top: 50px;
        right: -60px;
    }
    #yezi1_1_img {
        position: absolute;
        top: 0px;
        left: 0px;
    }
    #yezi1_2_img {
        position: absolute;
        top: 100px;
        left: -55px;
    }
    #shu1 {
        position: absolute;
        top: 0px;
        left: 0px;
        -webkit-transform-origin: top;
        -webkit-transform: rotateX(60deg);
    }
    #shu2 {
        position: absolute;
        top: 542px;
        left: 8px;
        -webkit-transform-origin: bottom;
        -webkit-transform: rotateX(-60deg);
    }
    #huaban1 {
        position: absolute;
        top: -70px;
        left: 100px;
    }

    #shu3 {
        position: absolute;
        top: -72px;
        left: -16px;
        -webkit-transform: rotateX(60deg);
        -webkit-transform-origin: top;
    }
    #shu4 {
        position: absolute;
        top: 538px;
        right: 0px;
        -webkit-transform-origin: bottom;
        -webkit-transform: rotateX(-60deg);
    }
    #huaban2 {
        position: absolute;
        top: -100px;
        left: 20px;
        -webkit-transform: rotateZ(0deg);
    }
    #huaban3 {
        position: absolute;
        top: 300px;
        left: 150px;
        opacity: 0;
        -webkit-transform: rotateZ(-205deg);
    }

    #shu5 {
        position: absolute;
        top: 0px;
        right: 10px;
        opacity: 0;
    }
    #shu6 {
        position: absolute;
        top: 616px;
        left: 0px;
        opacity: 0;
    }
    #yezi2 {
        position: absolute;
        top: 720px;
        left: 142px;
        opacity: 0;
    }

    .msg_bg {
        opacity: 0.5;
    }
    #msg1 {
        position: absolute;
        top: 0px;
        right: 50px;
        width: 45px;
        height: 189px;
        opacity: 1;
    }
    #msg1_bg {
        position: absolute;
        top: 0px;
        right: 50px;
        opacity: 0;
    }
    #you {
        position: absolute;
        top: 25px;
        left: 10px;
        opacity: 0;
    }
    #xin {
        position: absolute;
        top: 48px;
        left: 10px;
        opacity: 0;
    }
    #dian1 {
        position: absolute;
        top: 75px;
        left: 10px;
        opacity: 0;
    }
    #ta {
        position: absolute;
        top: 92px;
        left: 12px;
        opacity: 0;
    }
    #chun1 {
        position: absolute;
        top: 118px;
        left: 10px;
        opacity: 0;
    }
    #qu {
        position: absolute;
        top: 142px;
        left: 10px;
        opacity: 0;
    }

    #msg2 {
        position: absolute;
        top: 700px;
        left: 0px;
        opacity: 1;
    }
    #msg2_bg {
        position: absolute;
        top: 700px;
        left: 0px;
        opacity: 0;
    }
    #xing {
        position: absolute;
        top: 12px;
        left: 30px;
        opacity: 0;
    }
    #zai {
        position: absolute;
        top: 12px;
        left: 52px;
        opacity: 0;
    }
    #dian2 {
        position: absolute;
        top: 12px;
        left: 78px;
    }
    #hua {
        position: absolute;
        top: 12px;
        left: 88px;
        opacity: 0;
    }
    #kai {
        position: absolute;
        top: 12px;
        left: 112px;
        opacity: 0;
    }
    #shi {
        position: absolute;
        top: 12px;
        left: 136px;
        opacity: 0;
    }

    #msg3 {
        position: absolute;
        top: 360px;
        left: 0px;
        opacity: 1;
    }
    #msg3_bg {
        position: absolute;
        top: 360px;
        left: 0px;
        opacity: 0;
    }
    #mu {
        position: absolute;
        top: 12px;
        left: 30px;
        opacity: 0;
    }
    #yu {
        position: absolute;
        top: 12px;
        left: 52px;
        opacity: 0;
    }
    #dian3 {
        position: absolute;
        top: 12px;
        left: 78px;
        opacity: 0;
    }
    #chun2 {
        position: absolute;
        top: 12px;
        left: 88px;
        opacity: 0;
    }
    #feng {
        position: absolute;
        top: 12px;
        left: 112px;
        opacity: 0;
    }
    #li {
        position: absolute;
        top: 12px;
        left: 136px;
        opacity: 0;
    }

    .page_ctn {
        position: absolute;
        left: 40px;
        border:solid 2px rgba(255,255,255, 1);
        box-shadow: 5px 12px 5px rgba(0,0,0, 0.2);
        opacity: 0;
    }
    .page {
    }
    .showwords {
        font-size: 18px;
        color: white;
        position: absolute;
        z-index: 1;
        bottom: 20px;
        left: 15%;
        width: 70%;
        line-height: 30px;
        text-align: center;
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
        letter-spacing: 2px;
    }
    #page1_ctn{
        border:solid 2px rgba(97,92,89, 1);
    }
    #page1_ctn_bg {
        border:0px;
    }

    .page_ctn_bg {
        opacity: 0;
    }


    .page_h {
        position: absolute;
        /*  top: 50px;
            left: 50px;*/
        width: 420px;
        height: 280px;
        opacity: 0;
        display: none;
        border:solid 2px rgba(182,203,151, 1);
        /*box-shadow: 3px 6px 5px #A3B7A9;*/
    }


    #page2_h {
        position: absolute;
        top: 56px;
        left: 50px;
    }

    #page3_h {
        position: absolute;
        top: 425px;
        left: 30px;
    }

    .page_v {
        position: absolute;
        /*  top: 50px;
            left: 50px;*/
        width: 260px;
        height: 390px;
        opacity: 0;
        display: none;
        border:solid 2px rgba(182,203,151, 1);
        /*box-shadow: 3px 6px 5px #A3B7A9;*/

    }

    #page2_v {
        position: absolute;
        top: 20px;
        right: 33px;
    }


    #page3_v {
        position: absolute;
        top: 350px;
        left: 33px;
    }
    .page_bg_top {
        position: absolute;
        top: 0px;
        left: 0px;
        height: 50%;
        width: 550px;
        border-bottom:solid 1px rgba(182,203,151, 1);
        overflow: hidden;
        opacity: 0;
    }
    .page_bg_btm {
        position: absolute;
        top: 50%;
        left: -10px;
        height: 50%;
        width: 550px;
        border-top:solid 1px rgba(182,203,151, 1);
        overflow: hidden;
        opacity: 0;
    }

</style>
<style type="text/css">
    @-webkit-keyframes page3
    {
        0%  {
            opacity: 0;
            -webkit-transform: translateX(100px) rotate(10deg);
        }
        4%  {
            opacity: 0;
            -webkit-transform: translateX(100px) rotate(10deg);
        }
        27%  {
            opacity: 1;
            -webkit-transform: translateX(0px) rotate(0deg);
        }
        52%  {
            opacity: 1;
            -webkit-transform: translateX(-10px) rotate(0deg);
        }
        75%  {
            opacity: 1;
            -webkit-transform: translateX(0px) rotate(0deg);
        }
        94% {
            opacity: 0;
            -webkit-transform: translateX(-100px) rotate(0deg);
        }
        100% {
            opacity: 0;
            -webkit-transform: translateX(-100px) rotate(0deg);
        }
    }
    @-webkit-keyframes page3_bg
    {
        0%  {
            opacity: 0;
            -webkit-transform: translateX(0px);
        }
        23%  {
            opacity: 0.4;
            -webkit-transform: translateX(0px);
        }
        77%  {
            opacity: 0.4;
            -webkit-transform: translateX(10px);
        }
        100% {
            opacity: 0;
            -webkit-transform: translateX(20px);
        }
    }
    @-webkit-keyframes page3_bg_ctn
    {
        0%  {
            opacity: 0;
        }
        23%  {
            opacity: 0.4;
        }
        77%  {
            opacity: 0.4;
        }
        100% {
            opacity: 0;
        }
    }
    @-webkit-keyframes page2
    {
        0%  {
            opacity: 0;
            -webkit-transform: translateX(-100px) rotate(-10deg);
        }
        4%  {
            opacity: 0;
            -webkit-transform: translateX(-100px) rotate(-10deg);
        }
        27%  {
            opacity: 1;
            -webkit-transform: translateX(0px) rotate(0deg);
        }
        52%  {
            opacity: 1;
            -webkit-transform: translateX(10px) rotate(0deg);
        }
        75%  {
            opacity: 1;
            -webkit-transform: translateX(0px) rotate(0deg);
        }
        94% {
            opacity: 0;
            -webkit-transform: translateX(100px) rotate(0deg);
        }
        100% {
            opacity: 0;
            -webkit-transform: translateX(100px) rotate(0deg);
        }
    }
    @-webkit-keyframes page2_bg
    {
        0%  {
            opacity: 0;
            -webkit-transform: translateX(0px);
        }
        23%  {
            opacity: 0.4;
            -webkit-transform: translateX(0px);
        }
        77%  {
            opacity: 0.4;
            -webkit-transform: translateX(-10px);
        }
        100% {
            opacity: 0;
            -webkit-transform: translateX(-20px);
        }
    }
    @-webkit-keyframes page4
    {
        0%  {
            opacity: 0;
            -webkit-transform: scale(1.2);
        }
        13%  {
            opacity: 0;
            -webkit-transform: scale(1.2);
        }
        35%  {
            opacity: 1;
            -webkit-transform: scale(1);
        }
        58%  {
            opacity: 1;
            -webkit-transform: scale(1.06);
        }
        81%  {
            opacity: 1;
            -webkit-transform: scale(1);
        }
        100% {
            opacity: 0;
            -webkit-transform: scale(1);
        }
    }
    @-webkit-keyframes page4_bg
    {
        0%  {
            opacity: 0;
            -webkit-transform: scale(1.2);
        }
        17%  {
            opacity: 0;
            -webkit-transform: scale(1);
        }
        81%  {
            opacity: 0.4;
            -webkit-transform: scale(1.1);
        }
        100% {
            opacity: 0;
            -webkit-transform: scale(1.2);
        }
    }
    @-webkit-keyframes page1
    {
        0%  {
            opacity: 0;
            -webkit-transform: scale(1.1);
        }
        13%  {
            opacity: 0;
            -webkit-transform: scale(1.1);
        }
        35%  {
            opacity: 1;
            -webkit-transform: scale(1);
        }
        58%  {
            opacity: 1;
            -webkit-transform: scale(1.06);
        }
        81%  {
            opacity: 1;
            -webkit-transform: scale(1);
        }
        100% {
            opacity: 0;
            -webkit-transform: scale(1.1);
        }
    }
    @-webkit-keyframes page1_bg
    {
        0%  {
            opacity: 0;
            -webkit-transform: scale(1.1);
        }
        17%  {
            opacity: 0;
            -webkit-transform: scale(1);
        }
        81%  {
            opacity: 0.4;
            -webkit-transform: scale(1.1);
        }
        100% {
            opacity: 0;
            -webkit-transform: scale(1.1);
        }
    }

    @-webkit-keyframes fadein
    {
        0%  {opacity: 0}
        100%    {opacity: 1}
    }
    @-webkit-keyframes fadeout
    {
        0%  {opacity: 1}
        100%    {opacity: 0}
    }
    @-webkit-keyframes title_in
    {
        0%  {
            opacity: 0;
            -webkit-transform: scale(1.5);
        }
        29%  {
            opacity: 1;
            -webkit-transform: scale(1);
        }
        64%  {
            -webkit-transform: scale(1.1);
        }
        100% {
            -webkit-transform: scale(1);
            opacity: 1;
        }
    }
    @-webkit-keyframes title_out
    {
        0%  {
            opacity: 1;
            -webkit-transform: scale(1);
        }
        100% {
            -webkit-transform: scale(1.2);
            opacity: 0;
        }
    }
    @-webkit-keyframes yezi1
    {
        0%  {
            opacity: 1;
            -webkit-transform: translate(0px,0px);
        }
        95% {
            opacity: 1;
        }
        100% {
            -webkit-transform: translate(-500px,550px);
            opacity: 0;
        }
    }
    @-webkit-keyframes yezi2
    {
        0%  {
            -webkit-transform: translate(0px,0px);
            opacity: 0;
        }
        5% {
            opacity: 1;
        }
        100% {
            -webkit-transform: translate(500px,-500px);
            opacity: 1;
        }
    }
    @-webkit-keyframes shu6
    {
        0%  {
            -webkit-transform: translateX(-400px);
            opacity: 0;
        }
        22%  {
            -webkit-transform: translateX(0px);
            opacity: 1;
        }
        80%  {
            -webkit-transform: translateX(0px);
            opacity: 1;
        }
        100% {
            -webkit-transform: translateX(-400px);
            opacity: 0;
        }
    }
    @-webkit-keyframes shu5
    {
        0%  {
            -webkit-transform: translateX(200px);
            opacity: 0;
        }
        22%  {
            -webkit-transform: translateX(0px);
            opacity: 1;
        }
        80%  {
            -webkit-transform: translateX(0px);
            opacity: 1;
        }
        100% {
            -webkit-transform: translateX(200px);
            opacity: 0;
        }
    }
    @-webkit-keyframes huaban3
    {
        0%  {
            -webkit-transform: translate(0px,0px) rotateZ(-205deg);
            opacity: 0;
        }
        3% {
            opacity: 1;
        }
        53.8% {
            -webkit-transform: translate(380px,380px) rotateZ(-265deg);
            opacity: 1;
        }
        54%  {
            -webkit-transform: translate(380px,380px) rotateZ(-265deg);
            opacity: 0;
        }
        54.9%  {
            -webkit-transform: translate(-300px,-300px) rotateZ(-165deg);
            opacity: 0;
        }
        55%  {
            -webkit-transform: translate(-300px,-300px) rotateZ(-165deg);
            opacity: 1;
        }
        95% {
            opacity: 1;
        }
        100% {
            -webkit-transform: translate(0px,0px) rotateZ(-205deg);
            opacity: 0;
        }
    }
    @-webkit-keyframes huaban2
    {
        0%  {
            -webkit-transform: translate(0px,0px) rotateZ(0deg);
        }
        100% {
            -webkit-transform: translate(550px,700px) rotateZ(45deg);
        }
    }
    @-webkit-keyframes shu4
    {
        0%  {
            -webkit-transform: rotateX(-60deg);
        }
        20%  {
            -webkit-transform: rotateX(0deg);
        }
        80%  {
            -webkit-transform: rotateX(0deg);
        }
        100% {
            -webkit-transform: rotateX(-60deg);
        }
    }
    @-webkit-keyframes shu3
    {
        0%  {
            -webkit-transform: rotateX(60deg);
        }
        20%  {
            -webkit-transform: rotateX(0deg);
        }
        80%  {
            -webkit-transform: rotateX(0deg);
        }
        100% {
            -webkit-transform: rotateX(60deg);
        }
    }
    @-webkit-keyframes huaban1
    {
        0%  {
            -webkit-transform: translate(0px,0px);
        }
        100% {
            -webkit-transform: translate(500px,500px);
        }
    }
    @-webkit-keyframes shu2
    {
        0%  {
            -webkit-transform: rotateX(-60deg);
        }
        21%  {
            -webkit-transform: rotateX(0deg);
        }
        49%  {
            -webkit-transform: rotateX(2deg);
        }
        77%  {
            -webkit-transform: rotateX(0deg);
        }
        100% {
            -webkit-transform: rotateX(-60deg);
        }
    }
    @-webkit-keyframes shu1
    {
        0%  {
            -webkit-transform: rotateX(60deg);
        }
        21%  {
            -webkit-transform: rotateX(0deg);
        }
        49%  {
            -webkit-transform: rotateX(-2deg);
        }
        77%  {
            -webkit-transform: rotateX(0deg);
        }
        100% {
            -webkit-transform: rotateX(55deg);
        }
    }
    @-webkit-keyframes you
    {
        0%  {
            opacity: 0;
            -webkit-transform: translate(20px,-20px);
        }
        100% {
            opacity: 1;
            -webkit-transform: translate(0px,0px);
        }
    }

    @-webkit-keyframes msg1
    {
        0%  {
            opacity: 1;
        }
        21% {
            opacity: 1;
        }
        77% {
            opacity: 1;
        }
        100% {
            opacity: 0;
        }
    }
    @-webkit-keyframes msg1_bg
    {
        0%  {
            opacity: 0;
        }
        21% {
            opacity: 0.7;
        }
        77% {
            opacity: 0.7;
        }
        100% {
            opacity: 0;
        }
    }
    @-webkit-keyframes xing
    {
        0%  {
            opacity: 0;
            -webkit-transform: translateX(50px);
        }
        100% {
            opacity: 1;
            -webkit-transform: translateX(0px);
        }
    }
    @-webkit-keyframes msg2
    {
        0%  {
            opacity: 1;
            -webkit-transform: translateX(0px);
        }
        18% {
            opacity: 1;
        }
        80% {
            opacity: 1;
            -webkit-transform: translateX(0px);
        }
        100% {
            opacity: 0;
            -webkit-transform: translateX(50px);
        }
    }
    @-webkit-keyframes msg2_bg
    {
        0%  {
            opacity: 0;
        }
        18% {
            opacity: 0.7;
        }
        80% {
            opacity: 0.7;
        }
        100% {
            opacity: 0;
        }
    }
    @-webkit-keyframes mu
    {
        0%  {
            opacity: 0;
            -webkit-transform: translateY(20px);
        }
        100% {
            opacity: 1;
            -webkit-transform: translateY(0px);
        }
    }
    @-webkit-keyframes msg3
    {
        0%  {
            opacity: 1;
            -webkit-transform: translateY(50px);
        }
        21% {
            opacity: 1;
        }
        80% {
            opacity: 1;
            -webkit-transform: translateY(0px);
        }
        100% {
            opacity: 0;
            -webkit-transform: translateY(-50px);
        }
    }
    @-webkit-keyframes msg3_bg
    {
        0%  {
            opacity: 0;
            -webkit-transform: translateY(50px);
        }
        21% {
            opacity: 0.7;
        }
        80% {
            opacity: 0.7;
            -webkit-transform: translateY(0px);
        }
        100% {
            opacity: 0;
            -webkit-transform: translateY(-50px);
        }
    }


</style>
<body>
<div id='container'>
    <img src="{$skinurl}skin/chunfeng/bg.jpg"/>

    <div id='pagetitle'>
        <img id='title_bg' src="{$skinurl}skin/chunfeng/title_bg.png"/>
        <div class='titletable'>
            <div id='titlecontent'>
            </div>
        </div>
    </div>

    <div id='page1_ctn_bg' class='page_ctn page_ctn_bg'>
        <div id='page1_bg' class='page'>
        </div>
    </div>

    <div id='page1_ctn' class='page_ctn'>
        <div id='page1' class='page'>
            <span id='word1' class='showwords'></span>
        </div>
    </div>


    <img id='shu1' src="{$skinurl}skin/chunfeng/shu1.png"/>
    <img id='shu2' src="{$skinurl}skin/chunfeng/shu2.png"/>

    <img id='msg1_bg' class='msg_bg' src="{$skinurl}skin/chunfeng/msg1_bg.png"/>
    <div id='msg1'>
        <img id='you' src="{$skinurl}skin/chunfeng/you.png"/>
        <img id='xin' src="{$skinurl}skin/chunfeng/xin.png"/>
        <img id='dian1' src="{$skinurl}skin/chunfeng/dian1.png"/>
        <img id='ta' src="{$skinurl}skin/chunfeng/ta.png"/>
        <img id='chun1' src="{$skinurl}skin/chunfeng/chun1.png"/>
        <img id='qu' src="{$skinurl}skin/chunfeng/qu.png"/>
    </div>

    <div id='page3_bg_ctn' class='page_bg_btm'>
        <div id='page3_bg'></div>
    </div>
    <div id='page2_bg_ctn' class='page_bg_top'>
        <div id='page2_bg'></div>
    </div>

    <div id='page3_h' class='page_h'>
        <div id='word3_h' class='showwords'></div>
    </div>
    <div id='page3_v' class='page_v'>
        <div id='word3_v' class='showwords'></div>
    </div>

    <div id='page2_h' class='page_h'>
        <div id='word2_h' class='showwords'></div>
    </div>
    <div id='page2_v' class='page_v'>
        <div id='word2_v' class='showwords'></div>
    </div>



    <img id='shu3' src="{$skinurl}skin/chunfeng/shu3.png"/>
    <img id='shu4' src="{$skinurl}skin/chunfeng/shu4.png"/>
    <img id='huaban2' src="{$skinurl}skin/chunfeng/huaban2.png"/>
    <img id='huaban3' src="{$skinurl}skin/chunfeng/huaban2.png"/>

    <img id='msg2_bg' class='msg_bg' src="{$skinurl}skin/chunfeng/msg2_bg.png"/>
    <div id='msg2'>
        <img id='xing' src="{$skinurl}skin/chunfeng/xing.png"/>
        <img id='zai' src="{$skinurl}skin/chunfeng/zai.png"/>
        <img id='dian2' src="{$skinurl}skin/chunfeng/dian2.png"/>
        <img id='hua' src="{$skinurl}skin/chunfeng/hua.png"/>
        <img id='kai' src="{$skinurl}skin/chunfeng/kai.png"/>
        <img id='shi' src="{$skinurl}skin/chunfeng/shi.png"/>
    </div>


    <div id='page4_ctn_bg' class='page_ctn page_ctn_bg'>
        <div id='page4_bg' class='page'>
        </div>
    </div>

    <div id='page4_ctn' class='page_ctn'>
        <div id='page4' class='page'>
            <span id='word4' class='showwords'></span>
        </div>
    </div>

    <img id='shu5' src="{$skinurl}skin/chunfeng/shu5.png"/>
    <img id='shu6' src="{$skinurl}skin/chunfeng/shu6.png"/>
    <img id='yezi2' src="{$skinurl}skin/chunfeng/yezi2.png"/>

    <img id='msg3_bg' class='msg_bg' src="{$skinurl}skin/chunfeng/msg3_bg.png"/>
    <div id='msg3'>
        <img id='mu' src="{$skinurl}skin/chunfeng/mu.png"/>
        <img id='yu' src="{$skinurl}skin/chunfeng/yu.png"/>
        <img id='dian3' src="{$skinurl}skin/chunfeng/dian3.png"/>
        <img id='chun2' src="{$skinurl}skin/chunfeng/chun2.png"/>
        <img id='feng' src="{$skinurl}skin/chunfeng/feng.png"/>
        <img id='li' src="{$skinurl}skin/chunfeng/li.png"/>
    </div>


    <div id='yezi1'>
        <img id='yezi1_1_img' src="{$skinurl}skin/chunfeng/yezi1.png"/>
        <img id='yezi1_2_img' src="{$skinurl}skin/chunfeng/yezi1.png"/>
    </div>
    <img id='huaban1' src="{$skinurl}skin/chunfeng/huaban1.png"/>
</div>
</body>


<script>
    var image_size_width=[];
    var image_size_height=[];
    var image_url_index=0;
    var have_num = 0;
    var error_num = 0;
    var canshow = true;
    var reshow = false;
    var timeout = [];
    var delaytime=3000;    

    function id(name)
    {
        return document.getElementById(name);
    }
    function load_images()
    {
        reshow = false;
        image_size_width=[];
        image_size_height=[];
        Onload_imgs_url=[];
        image_url_index=0;
        have_num = 0;
        error_num = 0;
        begin_titletime = new Date();
        begin_titletime = begin_titletime.getTime();
        showtitle();
        canshow = true;
        for(var i=0;i<slider_images_url.length;i++)
        {
            var img=new Image();
            img.index=i;
            img.src=slider_images_url[i];
            img.onload=image_onload;
            img.onerror= image_onerror;
            Onload_imgs_url[i] = 'loading';
        }
    }

    function image_onerror(event)
    {
        var img = event.target;
        var index = img.index;
        if(index<10)
            error_num ++;
        Onload_imgs_url[index] = 'not find';
        console.log(Onload_imgs_url[index]);
        console.log(have_num + '-' + error_num);
        if((have_num+error_num >= 10 || slider_images_url.length == (have_num+error_num)) && canshow == true)
        {
            reshow = false;
            canshow =false;
            if(have_num == 0)
                return;
            var end_titletime = new Date();
            end_titletime = end_titletime.getTime();
            var dis_titletime = Math.abs(end_titletime-begin_titletime);
            if(dis_titletime>delaytime)
            {
                kuxuan();
            }
            else
            {
                dis_titletime = delaytime- dis_titletime;
                timeout[0] = setTimeout(function()
                {
                    kuxuan();
                },dis_titletime);
            }
        }
    }

    function image_onload(event)
    {
        if(reshow == true)
            return;

        var img = event.target;
        var index = img.index;

        if(index<10)
        {
            have_num++;
        }
        Onload_imgs_url[index] = img.src;
        image_size_height[index] = img.height;
        image_size_width[index] = img.width;

        // console.log(Onload_imgs_url[index]);
        // console.log(have_num + '-' + error_num);

        if((have_num + error_num >= 10 ||slider_images_url.length == (have_num+error_num)) && canshow == true)
        {
            reshow = false;
            canshow =false;
            if(have_num == 0)
                return;
            var end_titletime = new Date();
            end_titletime = end_titletime.getTime();
            var dis_titletime = Math.abs(end_titletime-begin_titletime);
            if(dis_titletime>delaytime)
            {
                kuxuan();
            }
            else
            {
                dis_titletime = delaytime- dis_titletime;
                timeout[0] = setTimeout(function()
                {
                    kuxuan();
                },dis_titletime);
            }

        }
    }
    function showtitle()
    {
        id('yezi1').style.webkitAnimation = 'yezi1 9.8s ease-out both';

        id('pagetitle').style.webkitAnimation = 'title_in 3s ease-out both';

        id('titlecontent').innerHTML = e_title

    }

    function kuxuan()
    {
        id('pagetitle').style.webkitAnimation = 'title_out 0.8s ease-out both';

        show1();
    }

    function show1()
    {
        setImage('1');

        id('shu3').style.webkitAnimation = '';
        id('shu4').style.webkitAnimation = '';
        id('huaban2').style.webkitAnimation = '';
        id('huaban3').style.webkitAnimation = '';
        id('msg2_bg').style.webkitAnimation = '';
        id('msg2').style.webkitAnimation = '';
        id('xing').style.webkitAnimation = '';
        id('zai').style.webkitAnimation = '';
        id('dian2').style.webkitAnimation = '';
        id('hua').style.webkitAnimation = '';
        id('kai').style.webkitAnimation = '';
        id('shi').style.webkitAnimation = '';

        id('page2_h').style.webkitAnimation = '';
        id('page2_v').style.webkitAnimation = '';
        id('page3_h').style.webkitAnimation = '';
        id('page3_v').style.webkitAnimation = '';
        id('page2_bg').style.webkitAnimation = '';
        id('page3_bg').style.webkitAnimation = '';
        id('page2_bg_ctn').style.webkitAnimation = '';
        id('page3_bg_ctn').style.webkitAnimation = '';

        id('huaban1').style.webkitAnimation = 'huaban1 7.9s ease-out infinite both';

        id('shu1').style.webkitAnimation = 'shu1 6.3s ease-out both';
        id('shu2').style.webkitAnimation = 'shu2 6.3s ease-out both';

        id('msg1_bg').style.webkitAnimation = 'msg1_bg 6.3s ease-out both';
        id('msg1').style.webkitAnimation = 'msg1 6.3s ease-out both';

        id('you').style.webkitAnimation = 'you 0.2s ease-out both';
        id('xin').style.webkitAnimation = 'you 0.3s 0.1s ease-out both';
        id('dian1').style.webkitAnimation = 'you 0.4s 0.3s ease-out both';
        id('ta').style.webkitAnimation = 'you 0.5s 0.4s ease-out both';
        id('chun1').style.webkitAnimation = 'you 0.7s 0.5s ease-out both';
        id('qu').style.webkitAnimation = 'you 0.9s 0.6s ease-out both';


        id('page1_ctn_bg').style.webkitAnimation = 'page1_bg 6.3s cubic-bezier(0,0,.67,.96) both';
        id('page1_ctn').style.webkitAnimation = 'page1 6.3s cubic-bezier(0,0,.67,.96) both';

        timeout[1] = setTimeout(show2,6000);


    }


    function show2()
    {
        var img_bili2 = setImage('2');
        var img_bili3 = setImage('3');

        if (img_bili3 > 1 && img_bili2 > 1) {
            id('page3_h').style.top = '400px';
            id('page2_h').style.top = '86px';

        }else {
            id('page3_h').style.top = '';
            id('page2_h').style.top = '';
        };

        id('shu5').style.webkitAnimation = '';
        id('shu6').style.webkitAnimation = '';
        id('yezi2').style.webkitAnimation = '';
        id('msg3_bg').style.webkitAnimation = '';
        id('msg3').style.webkitAnimation = '';
        id('mu').style.webkitAnimation = '';
        id('yu').style.webkitAnimation = '';
        id('dian3').style.webkitAnimation = '';
        id('chun2').style.webkitAnimation = '';
        id('feng').style.webkitAnimation = '';
        id('li').style.webkitAnimation = '';

        id('page4_ctn_bg').style.webkitAnimation = '';
        id('page4_ctn').style.webkitAnimation = '';

        id('shu3').style.webkitAnimation = 'shu3 6.4s ease-out both';
        id('shu4').style.webkitAnimation = 'shu4 6.4s ease-out both';

        id('huaban2').style.webkitAnimation = 'huaban2 9s ease-out both';
        id('huaban3').style.webkitAnimation = 'huaban3 9s ease-out both';

        id('msg2_bg').style.webkitAnimation = 'msg2_bg 6.4s ease-out both';
        id('msg2').style.webkitAnimation = 'msg2 6.4s ease-out both';

        id('xing').style.webkitAnimation = 'xing 0.4s ease-out both';
        id('zai').style.webkitAnimation = 'xing 0.5s ease-out both';
        id('dian2').style.webkitAnimation = 'xing 0.6s ease-out both';
        id('hua').style.webkitAnimation = 'xing 0.8s ease-out both';
        id('kai').style.webkitAnimation = 'xing 1s ease-out both';
        id('shi').style.webkitAnimation = 'xing 1.2s ease-out both';

        id('page2_h').style.webkitAnimation = 'page2 6.5s cubic-bezier(0,0,.67,.96) both';
        id('page2_v').style.webkitAnimation = 'page2 6.5s cubic-bezier(0,0,.67,.96) both';

        id('page3_h').style.webkitAnimation = 'page3 6.5s 0.3s cubic-bezier(0,0,.67,.96) both';
        id('page3_v').style.webkitAnimation = 'page3 6.5s 0.3s cubic-bezier(0,0,.67,.96) both';

        id('page2_bg').style.webkitAnimation = 'page2_bg 6.5s cubic-bezier(0,0,.67,.96) both';
        id('page3_bg').style.webkitAnimation = 'page3_bg 6.5s cubic-bezier(0,0,.67,.96) both';

        id('page2_bg_ctn').style.webkitAnimation = 'page3_bg_ctn 6.5s cubic-bezier(0,0,.67,.96) both';
        id('page3_bg_ctn').style.webkitAnimation = 'page3_bg_ctn 6.5s cubic-bezier(0,0,.67,.96) both';

        timeout[2] = setTimeout(show3,6000);

    }

    function show3()
    {
        setImage('4');

        id('shu1').style.webkitAnimation = '';
        id('shu2').style.webkitAnimation = '';
        id('msg1_bg').style.webkitAnimation = '';
        id('msg1').style.webkitAnimation = '';
        id('you').style.webkitAnimation = '';
        id('xin').style.webkitAnimation = '';
        id('dian1').style.webkitAnimation = '';
        id('ta').style.webkitAnimation = '';
        id('chun1').style.webkitAnimation = '';
        id('qu').style.webkitAnimation = '';

        id('page1_ctn_bg').style.webkitAnimation = '';
        id('page1_ctn').style.webkitAnimation = '';

        id('shu5').style.webkitAnimation = 'shu5 6.4s ease-out both';
        id('shu6').style.webkitAnimation = 'shu6 6.4s ease-out both';

        id('yezi2').style.webkitAnimation = 'yezi2 6.8s 1.2s ease-out both';

        id('msg3_bg').style.webkitAnimation = 'msg3_bg 6.4s ease-out both';
        id('msg3').style.webkitAnimation = 'msg3 6.4s ease-out both';

        id('mu').style.webkitAnimation = 'mu 1.5s ease-out both';
        id('yu').style.webkitAnimation = 'mu 1.1s ease-out both';
        id('dian3').style.webkitAnimation = 'mu 0.8s ease-out both';
        id('chun2').style.webkitAnimation = 'mu 0.5s ease-out both';
        id('feng').style.webkitAnimation = 'mu 0.4s ease-out both';
        id('li').style.webkitAnimation = 'mu 0.3s ease-out both';

        id('page4_ctn_bg').style.webkitAnimation = 'page4_bg 6.5s cubic-bezier(0,0,.67,.96) both';
        id('page4_ctn').style.webkitAnimation = 'page4 6.5s cubic-bezier(0,0,.67,.96) both';

        timeout[3] = setTimeout(show1,6000);

    }


    function setImage(idname)
    {
        if(reshow == true)
            return;

        while(Onload_imgs_url[image_url_index] == 'not find' || Onload_imgs_url[image_url_index] == 'loading')
        {
            // console.log(Onload_imgs_url[image_url_index]);
            image_url_index++;
            if(image_url_index == Onload_imgs_url.length)
                image_url_index = 0;
        }

        var img_bili = image_size_width[image_url_index]/image_size_height[image_url_index];
        var div,div1;
        var div_ctn;
        var height;
        var width;
        var top;
        var left;
        var word,word1;

        if(img_bili < (380/600))
        {
            height = 600;
            width = 600 * img_bili;
            top = 80;
            left = (500-width)/2 - 2;
        }
        else if(img_bili <= 1)
        {
            width = 400;
            height = 400 / img_bili;
            left = 50 - 2;
            top = (740-height)/2
        }
        else if(img_bili > 1)
        {
            width = 400;
            height = 400/img_bili;
            left = 50 - 2;
            top = (740-height)/2;
        }

        var width_bg;
        var height_bg;
        var left_bg;
        var top_bg;
        var div_bg;
        var div_ctn_bg;

        if (idname == '2' || idname == '3') {

            if (img_bili > 1) {
                div = id('page'+idname + '_h');
                div1 = id('page'+idname + '_v');

                word = id('word'+idname + '_h');
                word1 = id('word'+idname + '_v');

                width_div = 420;
                height_div = 280;

                width = 420;
                height = width_div / img_bili;

                if (height < height_div) {
                    width = height_div * img_bili;
                    height = height_div;
                };

            }else {
                div = id('page'+idname + '_v');
                div1 = id('page'+idname + '_h');

                word = id('word'+idname + '_v');
                word1 = id('word'+idname + '_h');

                width_div = 260;
                height_div = 390;

                height = 390;
                width = height * img_bili;
                if (width < width_div) {
                    height = width_div / img_bili;
                    width = width_div;
                };
            }

            div.style.display = 'block';
            div1.style.display = 'none';

            div.style.backgroundSize = (width) + 'px ' + (height) + 'px';
            div.style.backgroundImage = 'url('+Onload_imgs_url[image_url_index]+')';
            div.style.backgroundRepeat = 'no-repeat';
            div.style.backgroundPosition = -((width - width_div)/2)+'px ' + (-((height - height_div)/2)) + 'px';


            if (img_bili <= 1 ) {
                width_bg = 550;
                height_bg = 550/img_bili;
                left_bg = 0;
                top_bg = -(height_bg-815/2)/2;
            } else{
                height_bg = 815/2;
                width_bg = 815/2 * img_bili;
                left_bg = -(width_bg-550)/2;
                top_bg = 0;
            };
            div_bg = id('page'+idname + '_bg');

            div_bg.style.width = width_bg + 'px';
            div_bg.style.height = height_bg + 'px';
            div_bg.style.backgroundSize = (width_bg) + 'px ' + (height_bg) + 'px';
            div_bg.style.backgroundImage = 'url('+Onload_imgs_url[image_url_index]+')';
            div_bg.style.backgroundRepeat = 'no-repeat';
            div_bg.style.backgroundPosition = -((width_bg - 550)/2)+'px ' + (-((height_bg - 407.5)/2)) + 'px';

        }else {
            div = id('page'+idname);
            div_ctn = id('page'+idname + '_ctn');

            div.style.width = width + 'px';
            div.style.height = height + 'px';
            div.style.backgroundSize = (width) + 'px ' + (height) + 'px';
            div.style.backgroundImage = 'url('+Onload_imgs_url[image_url_index]+')';
            div.style.backgroundRepeat = 'no-repeat';

            div_ctn.style.width = (width+ 4) + 'px';
            div_ctn.style.height = (height + 4) + 'px';
            div_ctn.style.top = (top) + 'px';
            div_ctn.style.left = (left) + 'px';

            if (img_bili <= 1 ) {
                width_bg = 500;
                height_bg = 500/img_bili;
                left_bg = 0;
                top_bg = -(height_bg-815)/2;
            } else{
                height_bg = 815;
                width_bg = 815 * img_bili;
                left_bg = -(width_bg-500)/2;
                top_bg = 0;
            };

            div_bg = id('page'+idname + '_bg');
            div_ctn_bg = id('page'+idname + '_ctn_bg');

            div_bg.style.width = width_bg + 'px';
            div_bg.style.height = height_bg + 'px';
            div_bg.style.backgroundSize = (width_bg) + 'px ' + (height_bg) + 'px';
            div_bg.style.backgroundImage = 'url('+Onload_imgs_url[image_url_index]+')';
            div_bg.style.backgroundRepeat = 'no-repeat';

            div_ctn_bg.style.width = (width_bg+ 4) + 'px';
            div_ctn_bg.style.height = (height_bg + 4) + 'px';
            div_ctn_bg.style.top = (top_bg) + 'px';
            div_ctn_bg.style.left = (left_bg) + 'px';

            word = id('word'+idname);
        }

        var word_string = words[get_pid(Onload_imgs_url[image_url_index])];
        if(word_string != undefined)
        {
            word_string = word_string.replace(/[\n]/ig,'');

            word.innerText = word_string;
        }
        else
        {
            word.innerText = "";
        }

        image_url_index++;
        if(image_url_index==Onload_imgs_url.length)
            image_url_index = 0;

        return img_bili;
    }

    call_me(load_images);

    function reload_scene()
    {
        clearnode();
        reshow = true;
        setTimeout(load_images,100);
    }

    function clearnode()
    {
        for(var i = 0; i<timeout.length; i++)
        {
            clearTimeout(timeout[i]);
        }
        id('page1_ctn_bg').style.webkitAnimation = '';
        id('page1_ctn').style.webkitAnimation = '';
        var xinArr = ['pagetitle','yezi1','huaban1','shu1','shu2','msg1_bg','msg1','you','xin','dian1','ta','chun1','qu','shu3','shu4','huaban2','huaban3','msg2_bg','msg2','xing','zai','dian2','hua','kai','shi','shu5','shu6','yezi2','msg3_bg','msg3','mu','yu','dian3','chun2','feng','li','page2_h','page2_v','page3_h','page3_v','page2_bg','page3_bg','page2_bg_ctn','page3_bg_ctn','page1_ctn_bg','page1_ctn','page4_ctn_bg','page4_ctn'];

        for(var i = 0 ;i < xinArr.length ;i++)
        {
            id(xinArr[i]).style.webkitAnimation = '';
        }
    }

</script>
<!--模板结束-->